<template>
  <div class="staff">
    <SearchForm placeholder="搜索服务人员姓名" @search="search" />
    <div class="department-name">
      <div class="icon"><img mode="heightFix" src="../../static/images/staff/department-icon.png" /></div>
      <div class="name"><p v-text="deptName" /></div>
    </div>
    <div class="list-content">
      <StaffList ref="staffList" v-if="deptId" :deptId="deptId" :keywords="keywords" :ableComment="ableComment" @submit="staffSubmit" @msg="showResult" />
    </div>
    <div class="form-content">
      <uni-easyinput type="textarea" v-model="formValue" :maxlength="800" placeholder="请输入您对本部门优化营商环境的建议..."></uni-easyinput>
      <div class="tip">
        <uni-notice-bar single scrollable :speed="80" text="本次测评所填的答案和提供的全部信息将被严格保密" color="red" />
      </div>
      <button type="primary" :disabled="!ableSubmit" :class="{ disable: !ableSubmit }" @click="submit">提交</button>
    </div>
    <CommentResultDialog v-if="resultShow" :result-title="submitResultObj.title" :result-detail="submitResultObj.detail" @close="resultShow = false" />
  </div>
</template>

<script>
  import SearchForm from '../../components/common/SearchForm';
  import StaffList from '../../components/staff/StaffList';
  import CommentResultDialog from '../../components/staff/CommentResultDialog';
  import { staffComment, departmentComment } from '../../api/staff';
  import { checkDepartmentComment } from '../../api/department';
  import { isEmpty } from '../../utils/common';
  import { getAppData } from '../../utils/init';
  
  export default {
    name: 'index',
    components: {
      SearchForm,
      StaffList,
      CommentResultDialog,
    },
    props: {},
    data() {
      const appData = getAppData();
      console.log(appData, 123123);
      const { userInfo } = appData;
      return {
        formValue: '',
        submitResultObj: {
          title: '提交成功',
          detail: '感谢您的评议，我们会将您的意见和建议反馈给相关部门',
        },
        resultShow: false,
        organId: '',
        organName: '',
        deptId: '',
        deptName: '',
        keywords: '',
        ableComment: false,
        userInfo,
      };
    },
    computed: {
      ableSubmit() {
        return !isEmpty(this.formValue);
      },
    },
    watch: {},
    mounted() {
    },
    created() {
    },
    methods: {
      init() {
        this.getAbleComment();
      },
      async getAbleComment() {
        const { userInfo, organId } = this;
        const param = {
          districtToId: organId,
          personId: userInfo.personId,
        };
        const res = await checkDepartmentComment(param);
        if (res.code === 200 && res.data) {
          this.ableComment = res.data.isComment;
          if (!res.data.isComment && res.data.reason) {
            const msgObj = {
              title: res.data.title,
              detail: res.data.reason,
            };
            this.showResult({ data: msgObj });
          }
        }
      },
      search({ keywords }) {
        this.keywords = keywords;
      },
      async submit() {
        // organId: '',
        //     organName: '',
        //     deptId: '',
        //     deptName: '',
        
        // organIdTo // 被评人部门编号
        // districtTo // 被评区县
        // districtNameTo // 被评人区县名称
        // commentPersonId //评议人编号
        // districtFrom 义人区县[暂时不用，可以不传]
        // districtNameFrom 评议人区县名称[暂时不用，可以不传)
        // comment// 营商环境评论内容
        const { deptId, organId, organName, deptName, formValue } = this;
        const { userInfo } = this;
        const param = {
          organIdTo: deptId,
          districtTo: organId,
          districtNameTo: organName,
          commentPersonId: userInfo.personId,
          comment: formValue,
        };
        const res = await departmentComment(param);
        if (res.code === 200) {
          const msgObj = {
            title: '提交成功',
            detail: '感谢您的评议，我们会将您的意见和建议反馈给相关部门',
          };
          this.showResult({ data: msgObj });
        }
      },
      async staffSubmit({ param }) {
        param.businessComment = this.formValue;
        const res = await staffComment(param);
        if (res.code === 200 && res.data) {
          let msgObj = {
            title: '提交成功',
            detail: '感谢您的评议，我们会将您的意见和建议反馈给相关部门',
          };
          if (res.data.isComment) {
          } else {
            msgObj = {
              title: res.data.title,
              detail: res.data.reason,
            };
          }
          this.showResult({ data: msgObj });
        }
      },
      reload() {
        const staffList = this.$refs.staffList[ 0 ] || this.$refs.staffList;
        staffList.getData();
      },
      showResult({ data }) {
        this.submitResultObj = data;
        this.resultShow = true;
      },
    },
    onLoad(data) {
      this.organId = data.organId;
      this.organName = data.organName;
      this.deptId = data.deptId;
      this.deptName = data.deptName;
      this.init();
    },
  };
</script>

<style lang="scss" scoped>
  @import "../../components/common/search-form";
  
  .staff {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: white;
    .department-name {
      padding: 15px;
      display: flex;
      align-items: center;
      .icon {
        img {
          display: block;
          height: 15px;
        }
      }
      .name {
        margin-left: 10px;
        flex: 1;
        p {
          font-size: 14px;
          line-height: 1;
          color: black;
        }
      }
    }
    .list-content {
      flex: 1;
      overflow: hidden;
    }
    .form-content {
      padding: 15px;
      .tip {
        padding: 10px 0;
      }
      button {
        border-radius: 10px;
        background-color: #0669f0;
        transition: all 0.2s;
        &.disable {
          opacity: 0.5;
        }
      }
    }
  }
  
  ::v-deep uni-swipe-action-item {
    box-sizing: border-box;
    & + uni-swipe-action-item {
      .data-item {
        margin-top: 15px;
      }
    }
  }
</style>
